.area-zoom-in-top-enter-active,
.area-zoom-in-top-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: all .3s cubic-bezier(.645,.045,.355,1);
  transform-origin: center top;
}
.area-zoom-in-top-enter,
.area-zoom-in-top-leave-active {
  opacity: 0;
  transform: scaleY(0);
}

// commoon
.area-select {
    position: relative;
    display: inline-block;
    vertical-align: top;
    user-select: none;
    height: 32px;
    cursor: pointer;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #e1e2e6;
    * {
        box-sizing: border-box;
    }
    &:hover {
        border-color: #a1a4ad;
    }
    &.small {
        width: 126px;
    }
    &.medium {
        width: 160px;
    }
    &.large {
        width: 194px;
    }
    &.is-disabled {
        background: #eceff5;
        cursor: not-allowed;
        &:hover {
            border-color: #e1e2e6;
        }
        .area-selected-trigger {
            cursor: not-allowed;
        }
    }
    .area-selected-trigger {
        position: relative;
        display: block;
        font-size: 14px;
        cursor: pointer;
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 100%;
        padding: 8px 20px 7px 12px;
    }
    .area-select-icon {
        position: absolute;
        top: 50%;
        margin-top: -2px;
        right: 6px;
        content: '';
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-top-color: #a1a4ad;
        transition: all .3s linear;
        transform-origin: center;
        &.active {
            margin-top: -8px;
            transform: rotate(180deg)
        }
    }
}

//  select start
.area-selectable-list-wrap {
    position: absolute;
    width: 100%;
    max-height: 275px;
    z-index: 15000;
    border: 1px solid #a1a4ad;
    border-radius: 2px;
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.04);
    box-sizing: border-box;
    margin: 5px 0;
    overflow-x: hidden;
    overflow-x: auto;
}

.area-selectable-list {
    position: relative;
    margin: 0;
    padding: 6px 0;
    width: 100%;
    font-size: 14px;
    color: #565656;
    list-style: none;
    .area-select-option {
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        padding: 0px 15px 0px 10px;
        height: 32px;
        line-height: 32px;
        &.hover {
            background-color: #e4e8f1;
        }
        &.selected {
            background-color: #e4e8f1;
            color: #FF6200; 
            font-weight: 700;
        }
    }
}

//  select end

// cascader start
.cascader-menu-list-wrap {
    position: absolute;
    // max-height: 275px;
    white-space: nowrap;
    z-index: 15000;
    border: 1px solid #a1a4ad;
    border-radius: 2px;
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.04);
    box-sizing: border-box;
    margin: 5px 0;
    overflow: hidden;
    font-size: 0;
}

.cascader-menu-list {
    position: relative;
    margin: 0;
    font-size: 14px;
    color: #565656;
    padding: 6px 0;
    list-style: none;
    display: inline-block;
    height: 204px;
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 160px;
    vertical-align: top;
    background-color: #fff;
    border-right: 1px solid #e4e7ed;
    
    &:last-child {
        border-right: none;
    }
    .cascader-menu-option {
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        padding: 0px 15px 0px 10px;
        height: 32px;
        line-height: 32px;
        &.hover {
            background-color: #e4e8f1;
        }
        &:hover {
            background-color: #e4e8f1;
        }
        &.selected {
            background-color: #e4e8f1;
            color: #FF6200;
            font-weight: 700; 
        }
        &.cascader-menu-extensible {
            &:after {
                position: absolute;
                top: 50%;
                margin-top: -4px;
                right: 5px;
                content: "";
                width: 0;
                height: 0;
                border: 4px solid transparent;
                border-left-color: #a1a4ad;
            }
        }
    }
}
// cascader end

// custom scrollbar
.cascader-menu-list, .area-selectable-list-wrap {
    &::-webkit-scrollbar {
        width: 8px;
        background: transparent;
    }
    
    &::-webkit-scrollbar-button:vertical:increment,
    &::-webkit-scrollbar-button:vertical:decremen,
    &::-webkit-scrollbar-button:vertical:start:increment,
    &::-webkit-scrollbar-button:vertical:end:decrement {
        display: none;
    }
    
    &::-webkit-scrollbar-thumb:vertical {
        background-color: #b8b8b8;
        border-radius: 4px;
        &:hover {
            background-color:#777;
        }
    }
}
